<html>
<head>
	<title>CanesCalendar :: Search</title>	
	
	<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
	<!--[if lt IE 8]>
	  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
	<![endif]--></code></pre>
	
	<link href="css/main.css" title="External CSS" rel="stylesheet" type="text/css" media="screen">	
	
    <script type='text/javascript' src='js/jquery-week-calendar/libs/jquery-1.4.4.min.js'></script>	
    <script src="js/jquery-watermark/jquery.watermark.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	    jQuery(function() {
	        var vals = {
	            'professor': 'Example: Papamichail',
	            'course': 'Example: CSC or CSC120'
	        };
	        
	        var selected = $("#typeSelector").val();
	        $("#searchField").watermark(vals[selected]);
	        
	        $("#typeSelector").change(function() {
                selected = $("#typeSelector").val();
	            $("#searchField").watermark(vals[selected]);
	        });
	    });
	</script>
	
	<style type="text/css">
        #ratings {
			border: 1px solid #BBBCBD;
			margin: 0;
			padding: 0;
		}
 
		#ratings tr {
			background: #fff;
			font-size: 10pt;
		}
		
		/* get rid of the double border if there are no search results */
		#ratings tr:last-child td {
		    border-bottom: 0px !important;
		}
		
		#ratings tr:first-child + tr td {
		    background: #fff;
		    border-bottom: 1px solid #BBBCBD;
		}
		
		#ratings tr:first-child + tr td div {
		    text-align: left;
		    width: 300px;
            margin: 0px auto;
            padding: 10px 0px;
            /*border: 1px black solid;*/
		}
		
		#ratings tr:nth-child(odd) {
			background: #f3f6fa;
		}
 
		#ratings tr:first-child td {
			font-size: 9pt;
			font-weight: bold;
			text-align: center;
			border-bottom: 1px solid #BBBCBD;
			background: #CCE1F8;
			height: 15px;
			padding-top: 4px;
			padding-bottom: 3px;			
			
            background-image: -moz-linear-gradient(100% 100% 90deg, #dcdcdc, #fafafa);
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#dcdcdc));
 
			text-shadow: #fff 1px 1px;
		}
		
		#searchField {
		    width: 210px;
		}
		
        #add-button {
			display: inline;
			border: 0px none transparent;	
			background-color: transparent;
			background-image: url(images/addButtons.png);
			height: 14px;
			width: 14px;
		}

		#add-button:active {
			background-position: 28px 0px;
		}

		#add-button:hover {
			background-position: 14px 0px;
		}	
	</style>
</head>

<body>  
    <div class="container">	
		{% include "navbar.html" %}
		
		{% if numResults %}
        <div class="prepend-2 span-20" id="search">		
        {% else %}
        <div class="prepend-7 span-10" id="search">
        {% endif %}
            
             <table id="ratings">
                 <tr>
                    <td colspan=7>Search</td>
                 </tr>
             
                 <tr>
                    <td colspan=7>
                        <div>
                            <form action="/search" method="get">
                                        
                            <select name="type" id="typeSelector">
                                <option 
                                {% if selectedProf %}
                                    selected="selected"  
                                {% endif %}
                                value="professor">Professor</option>
                                <option 
                                {% if selectedCourse %}
                                    selected="selected"  
                                {% endif %}
                                value="course">Course</option>
                            </select>
                            <input type="search" id="searchField" name="searchTerm" value="{{ searchTerm }}">
                            <br>
                            <input {% if sort %} checked {% endif %} type=checkbox name="sort"> Sort by rating
                            <br><br>
                            <input type="submit" value="Search">
                            </form>
                        </div>
                     </td>
                 </tr>
        
                 {% ifequal numResults 0 %}
                 <tr>
                     <th colspan="7">
                         <center>No results found</center>
                     </th>
                 </tr>
                 {% endifequal %}
                
        
                 {% if selectedProf and numResults %}
                    <tr>
                        <th id="name">Name</th>
                        <th id="coursestaught">Courses Taught</th>
                        <th id="umrating">UM Rating</th>
                        <th id="rmprating">RateMyProfessor Rating</th>
                        <th id="ccrating">CanesCalendar Rating</th>
                    </tr>
           
                    {% for row in searchResult %}
                        <tr>

                            <td>{{ row.firstName }} {{row.lastName}}</td>
                            <td>{% for c in row.courses %}<a href="search?type=course&searchTerm={{c}}">{{c}}</a> {% endfor %}</td>
                            <td>{{ row.myumRatingOverall }}</td>
                            <td>{{ row.rateMyProfessorOverallRating }}</td>
                            <td>{{ row.weightedRating }}</td>
                        </tr>
                    {% endfor %}
                {% endif %}
            
                {% if selectedCourse and numResults %}
                    <tr>
                        <th id="title">Title</th>
                        <th id="code">Code</th>
                        <th id="credits">Section</th>
                        <th id="credits">Credits</th>
                        <th id="openslots">Open Slots</th>
                        <th id="professor">Professor</th>
                        <th id="ccrating">CanesCalendar Rating</th>
                    </tr>
                
                    {% for row in searchResult %}
                        <tr>
                            <td>{{ row.title }}</td>
                            <td>{{ row.dept.code }}{{ row.courseNum }}
                            <form action="/schedule" method="post" autocomplete="off">
                                <input type="hidden" name="department" value="{{ row.dept.code }}"/>
                                <input type="hidden" name="coursenum" value="{{ row.courseNum }}"/>
                                <input type="hidden" name="action" value="addCourse"/>
                                <button id="add-button" />
                            </form>
                            </td>
                            <td>{{ row.section }}</td>
                            <td>{{ row.credits }}</td>
                            <td>{{ row.openSpots }}</td>
                            <td><a href="search?type=professor&searchTerm={{ row.professor.lastName }}">{{ row.professor.firstName }} {{ row.professor.lastName }}</a></td>
                            <td>{{ row.professor.weightedRating }}</td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </table>
        </div>
    </div>
</body>
</html>